<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>css属性ppt</title>
    <meta content="ppt 网页 Copy" name="Description">
    <meta content="codester" name="Keywords">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link href="//cdn.bootcss.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/ppt.css">
</head>
<body>
<div class="h">

    <div class="container">
        <div class="row">
            <div class="span4 ft">
                <p>
                    display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，
                    这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline 。
                    一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。
                    <br/> 如右图：<br/><span>上inline</span><br/><span>下block</span>
                </p>

            </div>

            <div class="span8">
                <img src="./img/zda.png" style="width: 700px;height: 400px"/>
                <img src="./img/ss.png" style="width: 700px;height: 100px"/>
            </div>
        </div>
    </div>
</div>
<div>
    <div  class="container">
        <div class="row">
            <div class="span4">
                <h3>margin:auto</h3>
                <p>这里设置块级元素width可阻止它从左到右撑满、然后设置左右外边距为auto使其水平边距。
                    元素会占据所指定的宽度，然后剩余宽度会一分为二成为左右外边距。
                </p>
            </div>
            <div class="span8">
                <img src="./img/margin.png" />
            </div>
        </div>
    </div>
</div>

<div style="background-color: #42ffd6">
    <div  class="container">
        <div class="row">
            <div class="span4">
                <h3>max-width</h3>
                <p>
                    在这种情况下使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。
                    这点在移动设备上显得尤为重要，调整下浏览器窗口大小检查下吧
                </p>
            </div>
            <div class="span8">
                <img src="./img/max.png" />
            </div>
        </div>
    </div>
</div>
<div>
    <div  class="container">
        <div class="row">
            <div class="span4">
                <h3>盒模型</h3>
                <p>当设置了元素的宽度，实际展现的元素却能够超出设置：因为元素的边框和内边距会撑开元素。
                    看下面的例子，两个相同宽度的元素显示的实际宽度却不一样。
                </p>
            </div>
            <div class="span8">
                <img src="./img/盒模型.png" />
            </div>
        </div>
    </div>
</div>

<div style="background-color: #42ffd6">
    <div  class="container">
        <div class="row">
            <div class="span4">
                <h3>box-sizing</h3>
                <p>
                    当设置一个元素为box-sizing:border-box;时，此元素的内边距和边框不再会增加它的宽度。
                </p>
            </div>
            <div class="span8">
                <img src="./img/box-sizing%201.png" />
                <img src="./img/box-sizing%202.png" />
            </div>
        </div>
    </div>
</div>

<div>
    <div  class="container">
        <div class="row">
            <div class="span4">
                <h3>position属性型</h3>
                <h5>static（默认值）</h5>
                <p>
                    任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”，
                    一个 position 属性被设置为其他值的元素表示它会被“positioned”。
                </p>
            </div>
            <div class="span8">
                <img src="./img/static-1.png" />
                <img src="./img/static-2.png"  style="width: 700px;height: 100px"/>
            </div>
        </div>
    </div>
</div>

<div style="background-color: #42ffd6">
    <div  class="container">
        <div class="row">
            <div class="span8">
                <img src="./img/relative-1.png" />
                <img src="./img/relative-2.png" />
            </div>
            <div class="span4">
                <h5>relative</h5>
                <h6>表现的和 static 一样</h6>
                <p>
                    在一个相对定位（position属性的值为relative）的元素上设置 top 、 right 、 bottom
                    和 left 属性会使其偏离其正常位置。其他的元素则不会调整位置来弥补它偏离后剩下的空隙。
                </p>
            </div>

        </div>
    </div>
</div>

<div>
    <div  class="container">
        <div class="row">
            <div class="span4">
                <h5>fixed</h5>
                <p>
                    一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，
                    它还是会停留在相同的位置。和 relative 一样， top 、 right 、 bottom 和 left 属性都可用。
                </p>
            </div>
            <div class="span8">
                <img src="./img/dws.png" />
                <img src="./img/zd.png" />
            </div>
        </div>
    </div>
</div>


<div style="background-color: #42ffd6">
    <div  class="container">
        <div class="row">
            <div class="span4">
                <h5>absolute</h5>
                <h6>表现的和 static 一样</h6>
                <p>
                    是最棘手的position值。 absolute 与 fixed 的表现类似，除了它不是相对于视窗而是相对于最近的
                    “positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”
                    祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个“positioned”
                    元素是指p osition 值不是 static 的元素。
                </p>
            </div>
            <div class="span8">
                <img src="./img/absolute.png" />
            </div>
        </div>
    </div>
</div>

<div>
    <div  class="container">
        <div class="row">
            <div class="span6">
                <h3>清除浮动</h3>
                <p>
                    因为图片大小可能与div大小不同，所以有时会溢出div，那么该怎么办呢？
                </p>
                <img src="./img/图片1.png" />
            </div>
            <div class="span6">
                <img src="./img/图片3.png" style="width: 700px;height: 400px"/>
                <h3>
                    加入清除浮动的代码就ok了。如上图
                </h3>
            </div>
        </div>
    </div>
</div>

<div style="background-color: #42ffd6">
    <div  class="container">
        <div class="row">
            <div class="span8">
                <img src="./img/图片4.png" />
            </div>
            <div class="span4">
                <h3>浮动布局例子</h3>
                <p>
                    就如图右所示，两个n靠左，两个s则左边靠着n
                </p>
            </div>
        </div>
    </div>
</div>

<div>
    <div  class="container">
        <div class="row">
            <div class="span6">
                <h3>百分比宽度</h3>
                <img src="./img/图片5.png" style="width: 700px;height: 400px"/>

            </div>
            <div class="span6">
                <p>
                    当然我们也可以用百分比，来代替像素
                </p>
                <img src="./img/图片6.png" />
                <p>这样用百分比屏幕缩放时div也会随之变化，不会出现一些无法显示的情况
                </p>
            </div>
        </div>
    </div>
</div>

<div style="background-color: #42ffd6">
    <div  class="container">
        <div class="row">
            <div class="span4">
                <h3>响应式设计</h3>
                <p>
                    响应式布局可以更好地适应各种屏幕大小和浏览器。
                </p>
            </div>
            <div class="span8">
                <img src="./img/图片7.png" />
            </div>
        </div>
    </div>
</div>

<div>
    <div  class="container">
        <div class="row">
            <div class="span6">
                <h3>inline-block</h3>
                <img src="./img/图片8.png" style="width: 700px;height: 400px"/>
                <p>这是我们选择的较为复杂的浮动排版方法</p>
            </div>
            <div class="span6">
                <img src="./img/图片9.png"/>
                <p>而使用inline-block我们就可以让代码更简单了
                </p>
            </div>
            <div>
                <img src="./img/图片10.png" />
            </div>
        </div>
    </div>
</div>

<div style="background-color: #42ffd6">
    <div  class="container">
        <div class="row">
            <div class="span4">
                <h3>column</h3>
                <p>
                    Column可以帮我们轻松的实现文字的多列布局
                </p>
            </div>
            <div class="span8">
                <img src="./img/图片11.png" />
            </div>
        </div>
    </div>
</div>

<div>
    <div  class="container">
        <div class="row">
            <h2>css定位</h2>
            <div class="span6">
                <p>
                    CSS定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面，
                    并指定一个元素的内容太大时，应该发生什么。
                </p>
            </div>
            <div class="span6">
                <p>
                    元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，
                    除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
                </p>
            </div>
        </div>
    </div>
</div>

<div style="background-color: #42ffd6">
    <div  class="container">
        <div class="row">
            <h3>静态定位</h3>
            <div class="span6">
                <p>
                    HTML元素的默认值，即没有定位，元素出现在正常的流中。
                </p>
            </div>
            <div class="span6">
                静态定位的元素不会受到top, bottom, left, right影响。
            </div>
        </div>
    </div>
</div>

<div>
    <div  class="container">
        <div class="row">
            <h2>固定定位</h2>
            <div class="span4">
                <ul>
                    <li>
                        <p>
                            元素的位置相对于浏览器窗口是固定位置。
                        </p>
                    </li>
                    <li>
                        <p>
                            即使窗口是滚动的它也不会移动
                        </p>
                    </li>
                </ul>
            </div>
            <div class="span8">
                <img src="./img/图片12.png"/>
            </div>
        </div>
    </div>
</div>

<div style="background-color: #42ffd6">
    <div  class="container">
        <div class="row">
            <h3>Relative 定位</h3>
            <div class="span4">
                <ul>
                    <li>
                        <p>
                            relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。
                            然后通过设置垂直或水平位置，让这个元素"相对于"它的原始起点进行移动。
                            （再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，
                            移动元素会导致它覆盖其他框）
                        </p>
                    </li>
                    <li>
                        <p>
                            相对定位：relative 没有脱离正常的文档流，被设置元素相对于其原始位置而进行定位，
                            其原始占位信息仍存在。
                        </p>
                    </li>
                </ul>
            </div>
            <div class="span8">
                <img src="./img/图片13.png" />
            </div>
        </div>
    </div>
</div>

<div>
    <div  class="container">
        <div class="row">
            <h3>Absolute 定位</h3>
            <div class="span4">
                <ul>
                    <li>
                        <p>
                            absolute; 表示绝对定位，位置将依据浏览器左上角开始计算。 绝对定位使元素脱离文档流，
                            因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。
                            （因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index
                            来控制它层级次序。z-index的值越高，它显示的越在上层。）
                        </p>
                    </li>
                    <li>
                        <p>
                            绝对定位：ablution 脱离了文档流与浮动模型，独立于其他对象而存在，没有占位。
                        </p>
                    </li>
                </ul>
            </div>
            <div class="span8">
                <img src="./img/图片14.png" />
            </div>
        </div>
    </div>
</div>

</body>
</html>